<template>
  <div class="custom-export">
    <a-spin :spinning="loading">
      <a-form ref="formRef" autocomplete="off" name="basic" :model="formState" :label-col="{ style: 'width:110px' }" :wrapper-col="{ style: 'calc(100% - 110px)' }">
        <a-form-item label="模版名称" name="name" :rules="[{ required: true, message: '请输入模版名称', trigger: 'change' }]" v-if="saveOrExportStatus === '2'">
          <a-input v-model:value="formState.name" />
        </a-form-item>

        <a-form-item label="模版描述" name="description" :rules="[{ required: false, message: '请输入模版描述', trigger: 'change' }]" v-if="saveOrExportStatus === '2'">
          <a-textarea v-model:value="formState.description" />
        </a-form-item>

        <a-form-item label="模版类型" name="typeCode" :rules="[{ required: true, message: '请选择模版类型!' }]" v-if="saveOrExportStatus === '2'">
          <a-select v-model:value="formState.typeCode" placeholder="请选择" @change="changeName">
            <a-select-option v-for="item in dataDict['TEMPLATE_TYPE']" :key="item.consValue" :value="item.code" :label="item.name">{{ item.name }}</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="导出文件名称" name="exportName" :rules="[{ required: true, message: '请输入导出文件名称', trigger: 'change' }]" v-if="saveOrExportStatus === '1'">
          <a-input v-model:value="formState.exportName" />
        </a-form-item>

        <a-form-item label="导出内容" name="nodeTime" :rules="[{ required: false, message: '请勾选转导出内容', trigger: 'change' }]" v-if="saveOrExportStatus === '1'">
          <a-card>
            <div class="export-concent">
              <div class="content-div" v-for="(item, index) in dataList" :key="index">
                <span class="title-size">{{ item.type }}</span>
                <a-form-item-rest>
                  <a-checkbox-group v-model:value="item.checkValue" style="width: 100%; margin-top: 10px">
                    <a-row>
                      <a-col :span="4" v-for="(e, index) in item.feilds" :key="index" style="margin-bottom: 10px">
                        <a-checkbox :value="e.code">{{ e.name }}</a-checkbox>
                      </a-col>
                    </a-row>
                  </a-checkbox-group>
                </a-form-item-rest>
              </div>
            </div>
          </a-card>
        </a-form-item>
      </a-form>

      <div class="submit-btn-form-item">
        <a-button type="primary" @click="onSubmit" v-debounce>导 出</a-button>
        <a-button type="primary" @click="saveHandle" v-if="saveOrExportStatus === '1'">保存为模版并导出</a-button>
        <a-button @click="resetForm">取 消</a-button>
      </div>
    </a-spin>
  </div>
</template>

<script setup lang="ts">
import { toRefs, watch } from "vue";
import InitHook from "./composables/initHook";
import OperationHook from "./composables/operationHook";
import CommonHook from "@/hook/commonHook";

const props = withDefaults(
  defineProps<{
    visible: boolean;
    passData: TemplateLibrary.ListRows;
    type: number;
  }>(),
  {}
);
const emit = defineEmits<{
  (e: "submit"): void;
  (e: "update:visible", visible: boolean): void;
}>();

const { visible, passData, type } = toRefs(props);
const { dataDict } = CommonHook();

const { tableData, formState, loading, formRef, getExportContentApi, dataList, resetDataList, saveOrExportStatus } = InitHook();
const { onSubmit, resetForm, saveHandle, changeName } = OperationHook({
  visible,
  passData,
  tableData,
  formState,
  loading,
  formRef,
  emit,
  dataList,
  saveOrExportStatus,
  type
});

watch(
  () => visible.value,
  v => {
    if (v) {
      getExportContentApi();
    } else {
      resetForm();
      resetDataList();
    }
  }
);

getExportContentApi();
</script>
<style lang="stylus" scoped>
.custom-export {
  background-color: #fff;



  .export-concent{
    height:500px
    overflow-y:scroll
    .content-div{
      margin-bottom:20px
      .title-size{
        font-size:16px
        font-weight:600
      }
    }
  }

  .operation-btn-wrapper {
    :deep(.ant-btn) {
      margin-right: 16px;
    }
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
  }
}
</style>
